import React, { Component } from 'react';
import { List } from '$yo-component';
import { Scroller, Touchable } from '$yo-component';
import Header from '$component/header/index.js';
import yoHistory from '$common/history';
import './index.scss';

import fetch from "isomorphic-fetch"

class Detail extends Component {
    constructor() {
        super();
        this.state = {
            mySkill:{},
            dataSource: [1,2]
        };
    }
    componentWillMount(){
        fetch("../mock/skill.json")
        .then(result => {
            return result.json()
        })
        .then(res =>{
            this.setState({
                mySkill:res
            })
        })
    }
   

    render() {
        var skills = []
        if((JSON.stringify(this.state.mySkill))!="{}"){         
            for (let [key,val] of Object.entries(this.state.mySkill)){
                console.log(val)
                skills.push(<h3 key={key} className="bTitle">{key}:</h3>);
                var a =
                    <List
                        className="listStyle"
                        ref="list"
                        extraClass="m-list"
                        className= "skillContent"
                        dataSource={val}
                        renderItem={(item,i) => [
                            <img className="mark"src={item.url} width="100px" height="100px"/>,
                            <div className="flex">
                                <h1 >{item.title}</h1>
                                <p>{item.content}</p>
                            </div>
                        ]}
                        
                    />
                skills.push(a);
            }      
        }
        return (
            <div className="yo-flex">
                <Header title="技能分享" right={{ title: '首页', onTap: () => yoHistory.push("/") }}/>
                <Scroller extraClass="flex">
                     {skills}
                </Scroller>
                {/*<List
                    ref="list"
                    extraClass="flex m-list"
                    dataSource={this.state.dataSource}
                    renderItem={(item,i) => [
                        <img className="mark"src="../page/home/img/jw1.jpg" width="50px" height="50px"/>,
                        <div className="flex">
                            <h1 >{item.category}</h1>
                            <div >{item.name}</div>
                        </div>
                    ]}
                />*/}
            </div>
        )
    }
}


export default Detail;
